<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 20 20" style="border:solid #000;">
      
      <defs>
        <filter id="f1">
          <feImage href="10.svg" x="0" y="0" height="20" width="20" result="img1"/>
          <feDisplacementMap
            in="img1" in2="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="A"></feDisplacementMap>
        </filter>
      </defs>

      <rect x="0" y="0" width="20" height="20" fill="rgba(255,0,0,0.5)" filter="url(#f1)"/>
      <image xlink:href="10.svg" x="0" y="0" height="20" width="20"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100" style="border:solid #000;">
      
      <defs>
        <filter id="f2">
          <feImage href="../imgs/6.png" x="0" y="0" height="100" width="100" result="img1"/>
          <feDisplacementMap
            in="img1" in2="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
        </filter>
      </defs>

      <g filter="url(#f2)">
        <rect x="0" y="0" width="50" height="100" fill="rgba(255,0,0)"/>
        <rect x="50" y="0" width="50" height="100" fill="rgba(0,255,0)"/>
      </g>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100" style="border:solid #000;">
      
      <defs>
        <filter id="f3">
          <feImage href="../imgs/6.png" x="0" y="0" height="100" width="100" result="img1"/>
          <feDisplacementMap
            in="img1" in2="SourceGraphic" scale="20" xChannelSelector="A" yChannelSelector="R"></feDisplacementMap>
        </filter>
      </defs>

      <g filter="url(#f3)">
        <rect x="0" y="0" width="25" height="100" fill="rgba(255,0,0.5)"/>
        <rect x="25" y="0" width="25" height="100" fill="rgba(0,0,0,0.5)"/>
        <rect x="50" y="0" width="25" height="100" fill="rgba(255,0,0.5)"/>
        <rect x="75" y="0" width="25" height="100" fill="rgba(0,0,0,0.5)"/>
        <rect x="100" y="0" width="25" height="100" fill="rgba(255,0,0.5)"/>
      </g>
    </svg>
    <!-- <script src="index.js"></script> -->
  </body>
</html>
